<template>
  <div>
    <BasicModal :width="800" title="新增证书" @register="registerUpload">
      <BasicForm @register="registerForm">
        <template #crt1>
          <BasicUpload
            :emptyHidePreview="true"
            helpText="此crt文件名必须与下面key文件名一致，否则无法上传"
            :multiple="false"
          />
          <span class="m-t-2" style="color: #7f7f7f"
            >此crt文件名必须与下面key文件名一致，否则无法上传</span
          >
        </template>
        <template #crt2>
          <BasicUpload
            :emptyHidePreview="true"
            helpText="此crt文件名必须与下面key文件名一致，否则无法上传"
            :multiple="false"
          />
          <span class="m-t-2" style="color: #7f7f7f"
            >此key文件名必须与上面crt文件名一致，否则无法上传</span
          >
        </template>
      </BasicForm>
    </BasicModal>
  </div>
</template>
<script lang="ts" setup>
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm, FormSchema } from '/@/components/Form';
  import { BasicUpload } from '/@/components/Upload';

  const schemas: FormSchema[] = [
    {
      field: 'name',
      component: 'Input',
      label: '证书名称：',
      componentProps: {
        placeholder: '请输入证书名称',
      },
    },
    {
      field: 'crt1',
      component: 'Input',
      label: 'crt文件：',
      slot: 'crt1',
    },
    {
      field: 'crt2',
      component: 'Input',
      label: 'crt文件：',
      slot: 'crt2',
    },
  ];
  const [registerForm] = useForm({
    schemas,
    showActionButtonGroup: false,
    baseColProps: { span: 22 },
    labelWidth: 120,
  });
  const [registerUpload] = useModalInner();
</script>
